<template>
  <!-- 系统整体页面布局 -->
  <el-container class="el-container">
    <!-- 左侧菜单栏部分 -->

    <el-aside class="el-aside">

      <!-- <sidebartss :defaultActive="defaultActive" :key="'menu-' + new Date().getTime()" @value-updated="handleValueUpdated"></sidebartss> -->
      <sidebartss ref="childRef" :defaultActive="defaultActive" @value-updated="handleValueUpdated" @work-sub="workSub"></sidebartss>


    </el-aside>

    <!-- 右侧主题页面内容展示 -->
    <el-main class="el-mian">
      <!-- 路由页面 -->
      <router-view @value-updated="handleValueUpdated" @work-sub="workSub"></router-view>
    </el-main>

  </el-container>
</template>

<script>
  import MenuTree from '@/components/menu/menustree.vue';
  import Navvz from "@/components/Navvz";
  import Sidebartss from "@/components/Sidebartss";
  export default {
    components: {
      MenuTree,
      Navvz,
      Sidebartss
    },
    data() {
      return {
        defaultActive: {
          type: String,
          default: '/center/dataAnalysis'
        }
      }
    },

    // 检测路由变化
    watch: {
      $route() {
        this.setCurrentRoute();
      }
    },
    created() {
      // this.$route.path="/center/PersonalCertificate"
      console.log('aaa', this.$route.path);
      this.setCurrentRoute();
      this.handleValueUpdated();

    },

    methods: {
      
      workSub() {
        console.log('aaabbbccc');
        this.$refs.childRef.childMethodSi();
      },
      handleValueUpdated(value) {
        console.log('123')
        this.defaultActive = value; // 接收子组件传递的值，并更新数据
      },
      generateRandomNumber() {
        return Math.random();
      },
      setCurrentRoute() {
        this.activeIndex = this.$route.path; // 通过他就可以监听到当前路由状态并激活当前菜单
      },
      async logout() {
        this.$confirm('确定注销并退出系统吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
          .then(() => {
            this.$store.dispatch('LogOut').then(() => {
              localStorage.clear();
              location.href = '/index';
            });
          })
          .catch(() => {});
      },
    }

  }
</script>


<style>
  aside {
    padding: 0 !important;
    width: 220px !important;
  }
</style>



<style>
  /*铺满屏幕，没有边距*/


  html,
  body,
  #app,
  .el-container {
    height: 100%;
    padding: 0px;
    margin: 0px;

  }


  html,
  body,
  #app,
  .el-container {
    height: 100%;
  }

  .el-aside {
    width: 201px !important;
    background-color: #32323a;
    height: 100%;
  }

  .el-menu {
    width: 200px;
    min-height: 100%;
  }

  .el-menu span {
    margin-left: 10px;
  }

  .el-mian {
    background-color: #e4eef9;
    padding: 0px;
    margin: 0px;
    height: 100%;
  }
</style>
